<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,i) in swiperList" :key="i">
				<navigator class="swiper-item" :url="'/pag/good/good?goods_id='+item.goods_id">
					<image :src="item. image_src" class="nav-img"></image>
				</navigator>
			</swiper-item>
			<!-- <swiper-item>
				<view class="swiper-item"></view>
			</swiper-item> -->
			<!-- 导航 -->
		</swiper>
		<view class="nav-list">
			<view class="nav-item" v-for="(item ,i) in navList":key="i" @click="navClickHandler(item)">
				<image :src="item.image_src" class="nav-img"></image>
			</view>
		</view>
		<!-- 楼层区-->
		<view class="floor-list">
			<view class="floor-item" v-for="(item ,i) in floorList":key='i'>
				<image :src='item.floor_title.image_src' class="floor"></image>
				<view class="floor-a">
					<navigator class="floor-b" :url="item.product_list[0].url">
						<image :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width+'rpx'}" mode="widthFix"></image>
					</navigator>
					<view class="floor-c">
					<navigator class="rhz" v-for="(item2,i2) in item.product_list" :key='i' v-show="i2 !==0" :url="item2.url">
						<image :src="item2.image_src" :style="{width:item2.image_width+'rpx'}" mode="widthFix"></image>
					</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//这是轮播图的数据列表
				swiperList:[],
				//这是导航的数据列表
				navList:[],
				//楼层的数据列表
				floorList:[]
			}
		},
		onLoad(){
			//调用方法，获取轮播图的数据
			this.getSwiperList()
			//调用方法，获取导航的数据
			this.getNavList()
			//调用获取楼层的方法
			this.getFloorList()
		},
		methods:{
			async getSwiperList(){
				const {data:res}=await uni.$http.get('/api/public/v1/home/swiperdata')
				console.log(res)
				if (res.meta.status !==200) return uni.$showMsg()
				this.swiperList=res.message
				uni.$showMsg('数据请求成功！')
			},
			async getNavList(){
				const {data:res}=await uni.$http.get('/api/public/v1/home/catitems')
				if(res.meta.status!==200) return uni.$showMsg()
				this.navList=res.message
			},
		navClickHandler(item){
			if(item.name==='分类'){
				uni.switchTab({
					url:'/pages/cate/cate'
				})
			}
		},
		 async getFloorList(){
			 const {data:res}=await uni.$http.get('/api/public/v1/home/floordata')
			 if(res.meta.status!==200) return uni.$showMsg()
			res.message.forEach(floor=>{
				floor.product_list.forEach(prod=>{
				prod.url='/pag/goods_list/goods_list?'+prod.navigator_url.split("?")[1]
				})
			})
			 this.floorList=res.message
		 }
		}
	}
</script>

<style lang="scss">
 swiper{
	 height: 200px;
	 .swiper-item,
	 image{
		 width: 100%;
		 height: 100%;
	 }
 
 }
 .nav-list{
	 display: flex;
	 justify-content: space-around;
	 margin: 15px 0;
	 .nav-img{
	 	 width: 70px;
	 	 height: 80px;
		 // border: 1px solid red;
	 }
 }
 .floor{
	 width: 100%;
	 height: 60px;
	 // display: flex;
 }
	.floor-c{
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: space-around;
 }
 .floor-a{
	 display: flex;
	 padding-left:10px ;
 }
</style>
